<template>
	<view class="collection-code-wrapper">
		<!-- 返回首页 -->
		<uni-bankhome />
		<div class="qrcode-outer">
			<div class="title">
				商家二维码收款
			</div>
			<w-qrcode v-if="id" ref="qrcode" :options="options" @longpress="saveimg" @generate="hello"></w-qrcode>
			<div class="store-name">{{name}}</div>
		</div>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	export default {
		data() {
			return {
				id: '', // 店铺ID
				name: '', // 店铺名称
				options: {
					code: '', // 生成二维码的值
					size: 400, // 460代表生成的二维码的宽高均为460rpx
					img: { // 二维码log配置 非必传
						src: '/static/logo.png', // 图片地址
						size: 60, // 图片大小
						degree: 4, // 圆角大小 如果type为round生效
						type: 'round', //图片展示类型 默认none 可选值  round圆角  circle圆 如果为round 可以传入degree设置圆角大小 默认 5
						color: '#ffffff', //图片周围的白色边框
						width: 4 //图片周围白色边框的宽度 默认5
					},
				},
				codeSaveImg: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.name = options.name
		},
		onShow() {
			this.options.code = this.id
		},
		methods: {
			async SaveCode() { //保存二维码图片~
				console.log(this.$refs.qrcode)
				const res = await this.$refs.qrcode.saveImg()
				// console.log(res)
			},
			hello(res) { //二维创建成功失败 都会触发
				// console.log(res)
				this.codeSaveImg = res.img.tempFilePath;
			},
			saveimg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.codeSaveImg,
					success: function() {
						uni.showToast({
							title: "保存成功！",
							icon: "none",
						});
					},
					fail: function(res) {
						wx.showModal({
							title: "提示",
							content: "需要您授权保存相册",
							showCancel: false,
							success() {
								wx.openSetting({
									success(settingdata) {
										if (settingdata.authSetting[
												'scope.writePhotosAlbum']) {

										} else {

										}
									}
								})
							}
						})

					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.collection-code-wrapper {
		height: 100vh;
		background-color: #ffcc00;
		padding-top: 200upx;

		.qrcode-outer {
			margin: auto;
			width: 600upx;
			background-color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 12upx;
			overflow: hidden;
			padding-bottom: 40upx;

			.title,
			.save {
				width: 100%;
				height: 100upx;
				line-height: 100upx;
			}

			.title {
				background-color: #f8f8f8;
				margin-bottom: 88upx;
				color: #ffcc00;
			}

			.save {
				margin-top: 88upx;
				color: #0d68d6;
			}
			.store-name{
				text-align: center;
				word-break: break-all;
				margin-top: 32upx;
				padding: 0 100upx;
				font-size: 32upx;
				font-weight: 600;
			}
		}
	}
</style>
